const app = getApp()
// 设置文本
const setText = (context, fs, color, x, y, c) => {
  context.setFontSize(fs);
  context.setFillStyle(color);
  context.setTextAlign('left');
  context.fillText(c, x, y);
  context.restore();
};
Page({
  data: {
    imagePath: ''
  },
  onLoad() {
    var that = this;
    //#####如需引用网络图片 需先下载
    wx.downloadFile({
      url: 'https://sports.online.sh.cn/images/attachement/jpg/site1/20190716/IMGd43d7e5f353551323902930.jpg',
      success: function (res) {
        that.setData({
          path: res.tempFilePath
        })
      }
    })
    var ctx = wx.createCanvasContext('mycanvas');
    var c_avatar = '../image/timg (2).jpg';
    var wechat = '../image/wechat.png';
    var path = that.data.path;
    let width=375;
    // 标题


    // 绘制背景颜色
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 375, 612);
    setText(ctx, 16, '#333333', (width - ctx.measureText('签署报告').width) * 0.5, width * 0.1, '签署报告');

    // 绘制孩子头像、姓名  年份
    //绘制名字
    setText(ctx, 16, '#333333', 40, 80, '合同编号:');
    setText(ctx, 16, '#333333', 40, 100, '合同编号1:');
    // ctx.setFontSize(15);
    // ctx.setFillStyle('#565656');
    // ctx.fillText('签署内容:', 40, 110);
    // setText(ctx, 14, '#333333', 40 + ctx.measureText('合同编号:').width*2, 80, 'P1911270623');
    setText(ctx, 16, '#333333', 40, 150, '签署内容:');
    //绘制年份
    // setText(ctx, 20, '#333333', 210, 55, "2019,");
    //绘制标题
    // setText(ctx, 16, '#333333', 260, 55, "每月'心'发现");
    // 绘制画报外框


    ctx.rect(20, 85, 335, 457)
    ctx.setFillStyle('white')
    ctx.fill()
    // 绘制画报背景图
    //这个地方的图片是需要注意，图片需要下载不然，手机上不能正常显示！！！
    // ctx.drawImage(path, 30.85, 95, 315, 437);
    setText(ctx, 44, '#fff', 62, 160, '1');
    setText(ctx, 36, '#fff', 62, 200, 'Jan.');
    //头像
    ctx.arc(45, 45, 25, 0, 2 * Math.PI) //画出圆
    ctx.strokeStyle = "#fff";
    ctx.clip(); //裁剪上面的圆形

    // ctx.drawImage(c_avatar, 20, 20, 50, 50);
    // 绘制生成画报
    ctx.draw(true, setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          console.log(res)
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath
          });
        },
        fail: function (res) {
          console.log(res);
        }
      })
    }, 1000));
  }
})
